import React, { Component, Fragment } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import EditPage from '@/components/EditPage';
import DetailPage from '@/components/DetailPage';
import FileReader from '@/components/FileReader';
import {
  queryDictData,
  formItemFragement,
  queryDict,
  queryPerson,
  formatPrice,
} from '@/utils/common';
import { allDictList } from '@/utils/constans';
import {
  selectArchivesDetailAndInfo,
  renderTableAdSelect,
  archivesStatusList,
  archivesTypeList,
  allUrl,
  renderTableAdSearch,
  allDispatchType,
} from './utils';
import TrainNumInfo from './TrainNumInfo';
import PressureInfo from './PressureInfo';
import IncidentalInfo from './IncidentalInfo';
import ArchivesDriverslInfo from './ArchivesDriverslInfo';

@connect(({ Archives, loading, component }) => ({
  Archives,
  archivesDetail: Archives.archivesDetail,
  dictObject: component.dictObject,
  loading: loading.effects[allDispatchType.detail],
}))
export default class ArchivesDetail extends Component {
  state = {
    visibleTrain: false,
    visibleOperate: false,
    trainId: '',
  };
  componentWillMount() {
    // 查询字典项
    const allDict = [
      allDictList.straightAddress,
      allDictList.businessType,
      allDictList.cabinetTypeHK,
      allDictList.archives_place,
    ];
    queryDict({ props: this.props, allDict });
  }

  componentDidMount() {
    const { detailId, isHK } = this.props;
    const id = detailId;
    if (!id) return;
    selectArchivesDetailAndInfo({
      type: allDispatchType.detail,
      payload: { id, isHK },
      props: this.props,
      callback: data => {
        const { relationObjId, receiverType } = data;
        this.setState({
          trainId: data.trainInfo.id,
        });
        if (relationObjId) return;
        const url = receiverType === 'EMPLOYEE' ? allUrl.userList : allUrl.supplierList;
        queryPerson({ data: relationObjId, props: props, url });
      },
    });
  }

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };
  formatMoney = text => {
    return text && Number(text) !== 0 ? Number(text).toFixed(2) : 0;
  };
  setTrainInfoModal = type => {
    const { visibleTrain } = this.state;
    this.setState({
      visibleTrain: !visibleTrain,
      type,
    });
  };
  setOilInfoModal = type => {
    const { visibleOperate } = this.state;
    this.setState({
      visibleOperate: !visibleOperate,
      type,
    });
  };

  render() {
    const { loading, archivesDetail, detailId } = this.props;
    const { visibleTrain, visibleOperate, trainId } = this.state;
    const detail = archivesDetail[detailId] || {};
    const detailHK = detail ? detail.trainInfo || {} : {};

    const editPageParams = {
      panelValue: [
        { key: '基础信息' },
        detail.status !== 'UNSEALED' && {
          key: '司机提成',
        },
        trainId && { key: '杂费明细' },
        { key: '压夜记录' },
        
      ],
    };

    const formItem = [
      [
        <DetailPage label="车次号" value={detailHK.trainNo} />,
        <DetailPage label="是否查验" value={detailHK.check ? '是' : '否'} />,
      ],

      [
        <DetailPage
          label="币种"
          value={renderTableAdSelect({
            props: this.props,
            value: detailHK.currencyType,
            key: allDictList.currencyType,
          })}
        />,
        <DetailPage label="车次运费" value={formatPrice(detailHK.freight)} />,
      ],
      [
        <DetailPage label="车次状态" value={detailHK.status} />,
        <DetailPage label="车次车牌号" value={detail.cartPlate} />,
      ],
      [
        <DetailPage label="车次始发地" value={detailHK.hkOrigin} />,
        <DetailPage label="车次目的地" value={detailHK.hkDestination} />,
      ],

      [
        <DetailPage label="车次计费车型" value={detailHK.pricingModels} />,
        <DetailPage label="司机" value={detail.driverName} />,
      ],
      [
        <DetailPage
          label="状态"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.status,
            data: archivesStatusList,
          })}
        />,
        <DetailPage
          label="类型"
          value={renderTableAdSelect({
            props: this.props,
            value: detail.businessType,
            key: allDictList.businessType,
          })}
        />,
      ],
      [
        <DetailPage
          label="直派点"
          value={renderTableAdSelect({
            props: this.props,
            value: detailHK.straightAddress,
            key: allDictList.straightAddress,
          })}
        />,
        <DetailPage label="提派点" value={detailHK.sendSome} />,
      ],
      [
        <DetailPage label="始发地" value={detailHK.origin} />,
        <DetailPage label="目的地" value={detailHK.destination} />,
      ],
      [
        <DetailPage
          label="业务类型"
          value={
            detailHK.trainBusinessType
              ? detailHK.trainBusinessType == 'IMPORT'
                ? '进口'
                : '出口'
              : ''
          }
        />,
        <DetailPage label="中转地" value={detailHK.transit} />,
      ],
      [
        <DetailPage label="发车时间" value={detailHK.transportStartTime} />,
        <DetailPage label="收车时间" value={detailHK.transportEndTime} />,
      ],
      [
        <DetailPage
          label="柜型类别"
          value={renderTableAdSelect({
            props: this.props,
            value: detailHK.carType,
            key: allDictList.cabinetTypeHK,
          })}
        />,
        <DetailPage label="结算周期" value={detail.settlementDate} />,
      ],
      [<DetailPage label="备注" value={detailHK.remarks} />],
      [
        <DetailPage
          label="附件"
          value={
            <FileReader
              urlType="tms"
              value={detail.fileList || []}
              showUploadList={{ showPreviewIcon: true, showRemoveIcon: false }}
              showUpload={false}
            />
          }
        />,
      ],
    ];

    return (
      <EditPage {...editPageParams}>
        <Spin spinning={loading}>{formItemFragement(formItem)}</Spin>
        {detail.status !== 'UNSEALED' && (
          <Fragment>
            <ArchivesDriverslInfo
              businessType={detailHK.businessType}
              archivesId={detailId}
              isHK={true}
            />
          </Fragment>
        )}
        {trainId && (
          <Fragment>
            <IncidentalInfo isHK={true} trainId={trainId} onlyRead={true} disabled={true} />
          </Fragment>
        )}
        <Fragment>
          <PressureInfo archivesId={detailId} onlyRead={true} mode="detail" disabled={true} />
        </Fragment>
        
      </EditPage>
    );
  }
}
